<template>
    <!-- 商品组 -->
    <view v-if="data.goodsList.data.length" class="diy-sharpGoods" :style="'background: ' + itemStyle.background + ';'">
        <view class="sharp-top dis-flex flex-y-center">
            <view class="sharp-top--left flex-box dis-flex flex-y-center">
                <view class="sharp-modular dis-flex flex-y-center">
                    <text class="iconfont icon-miaosha-b"></text>
                    <text class="modular-name">{{$t('m.xianshi')}}</text>
                </view>
                <view class="sharp-active-status">
                    <text>{{ data.active.sharp_modular_text }}</text>
                </view>
                <!-- 倒计时 -->
                <view v-if="data.active.status == ActiveStatusEnum.STATE_BEGIN.value" class="active-count-down">
                    <view class="clock dis-flex">
                        <view class="clock-time">
                            <text>{{ countDownList[0].dynamic.hou }}</text>
                        </view>
                        <view class="clock-symbol">
                            <text>:</text>
                        </view>
                        <view class="clock-time">
                            <text>{{ countDownList[0].dynamic.min }}</text>
                        </view>
                        <view class="clock-symbol">
                            <text>:</text>
                        </view>
                        <view class="clock-time">
                            <text>{{ countDownList[0].dynamic.sec }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="sharp-top--right">
                <form @submit="_onTargetSharpIndex" :report-submit="true">
                    <button formType="submit" class="btn-normal dis-flex">
                        <view class="sharp-more dis-flex flex-y-center">
                            <text class="sharp-more-text">{{$t('m.gengduo')}}</text>
                            <text class="sharp-more-arrow iconfont icon-xiangyoujiantou"></text>
                        </view>
                    </button>
                </form>
            </view>
        </view>

        <view :class="'goods-list display__list clear column__' + itemStyle.column">
            <view class="goods-item" v-for="(dataItem, index) in data.goodsList.data" :key="index">
                <form @submit="_onTargetGoods" :report-submit="true">
                    <button formType="submit" class="btn-normal" :data-id="dataItem.sharp_goods_id">
                        <view class="goods-item--container">
                            <!-- 单列商品 -->
                            <block v-if="itemStyle.column == 1"></block>
                            <!-- 两列三列 -->
                            <block v-else>
                                <!-- 商品图片 -->
                                <view class="goods-image">
                                    <image class="image" mode="aspectFill" :src="dataItem.goods_image"></image>
                                </view>
                                <view class="detail">
                                    <!-- 商品标题 -->
                                    <view v-if="itemStyle.show.goodsName" class="goods-name twolist-hidden">
                                        {{ dataItem.goods_name }}
                                    </view>
                                    <!-- 商品价格 -->
                                    <view class="detail-price onelist-hidden">
                                        <text v-if="itemStyle.show.seckillPrice" class="goods-price f-30 col-m">￥{{ dataItem.goods_sku.seckill_price }}</text>
                                        <text v-if="itemStyle.show.originalPrice && dataItem.goods_sku.original_price > 0" class="line-price col-9 f-24">
                                            ￥{{ dataItem.goods_sku.original_price }}
                                        </text>
                                    </view>
                                </view>
                            </block>
                        </view>
                    </button>
                </form>
            </view>
        </view>
    </view>
</template>

<script>
const app = getApp(); // 工具类

import util from '../../../utils/util.js'; // 倒计时插件

import CountDown from '../../../utils/countdown.js'; // 枚举类：秒杀活动商品状态

import ActiveStatusEnum from '../../../utils/enum/sharp/GoodsStatus.js';
export default {
    data() {
        return {
            ActiveStatusEnum,

            // 秒杀活动商品状态
            // 倒计时
            countDownList: [],

            value: '',
            hou: '',
            min: '',
            sec: '',

            dataItem: {
                sharp_goods_id: '',
                goods_image: '',
                goods_name: '',

                goods_sku: {
                    seckill_price: '',
                    original_price: 0
                }
            }
        };
    },
    options: {
        addGlobalClass: true
    },
    /**
     * 组件的属性列表
     * 用于组件自定义设置
     */
    props: {
        itemIndex: String,
        itemStyle: Object,
        params: Object,
        data: Object
    },
    /**
     * 在组件实例进入页面节点树时执行
     */
    beforeMount() {
        let _this = this;

        _this._initCountDownData();
    },
    /**
     * 组件的方法列表
     * 更新属性和数据的方法与更新页面数据的方法类似
     */
    methods: {
        /**
         * 跳转商品详情页
         */
        _onTargetGoods(e) {
            // 记录formid
            app.globalData.saveFormId(e.detail.formId); // 生成query参数

            let _this = this;

            let query = util.urlEncode({
                active_time_id: _this.data.active.active_time_id,
                sharp_goods_id: e.detail.target.dataset.id
            }); // 跳转到商品详情页
            uni.navigateTo({
                url: `/pages/sharp/goods/index?${query}`
            });
        },

        /**
         * 更多秒杀
         */
        _onTargetSharpIndex(e) {
            // 记录formid
            app.globalData.saveFormId(e.detail.formId); // 跳转到秒杀会场首页

            uni.navigateTo({
                url: `/pages/sharp/index/index`
            });
        },

        /**
         * 初始化倒计时组件
         */
        _initCountDownData(data) {
            let _this = this;

            let active = _this.data.active;
            if (!active) {
                return false;
            } // 记录倒计时的时间

            _this.countDownList[0] = {
                date: active.count_down_time
            };

            CountDown.onSetTimeList(_this, 'countDownList');
        }
    }
};
</script>
<style>
@import './index.css';
</style>
